草庐IT

vant + H5

全部标签

基于vant UI设计一个下拉选择跟搜索功能的组件

theme:smartblue简介:这个是基于vant3.0跟vue3.0的项目,在开发中封装的一个组件效果图:组件功能1.组件的下拉框数据进行排序从小到大,分别为四个字体及以下,一行占四个位置,四个字体以上十个字体以下,一行占2个位置均匀分布,超过十个字体,一行占一个位置,本来想过说用padding自动设置数据的宽度,但是效果不太好看,最后选择了这种方法2.防抖跟节流,这个是在搜索框加的,进行模糊查询,输入字符,结束一秒后没有任何操作在进行请求3.进行下拉框的遍历,下拉框为一个数组,根剧数据的数据遍历下拉框,以及下拉框的隐藏跟搜索框的隐藏开发第一步首先先将下拉框改造成可以进行循环渲染的参数:

H5接入微信公众号方法(超详细)

微信官方文档一、使用真实公众号并认证开发者,或者申请使用测试号注意:在微信开发者工具中调试,必须先成为公众号开发者,可以在微信公众号后台进行配置位置:公众号后台>设置与开发>开发者工具>web开发者工具>绑定微信开发者微信号(必须先关注此公众号才能成为开发者)二、在公众号后台配置相关信息,有两处需要填写1.接口配置信息此处可不填写,这个地方的内容是发送消息时用的,如果仅是调用普通微信api,无需填写。2.js安全域名此处必须配置,只有此域名发出的请求才能获得微信权限注意:域名不需要加http://或者https://,也不需要添加端口号,可以是ip地址例:192.168.123.123;abc

H5页面转微信小程序(web-view)

效果先放效果让大家看一下吧,过程很简单。H5页面图小程序预览图准备工作注册一个小程序(一定得是企业认证账号,个人账号无法使用web-view),具体注册就不演示了。国内的备案域名(你H5页面和后台API域名)部署SSL证书(web-view必须使用https)开始制作配置服务器域名开发管理——开发设置——服务器域名(主要是配置request)配置业务域名开发管理——开发设置——业务域名(不配置web-view无法加载H5页面)注意:如果这里不配置,页面会提示“小程序不支持打开非业务域名请重新配置”注意:个人认证没有这个配置,个人认证无法使用web-view创建小程序在开发者设置里,找到AppI

微信小程序web-view环境下H5跳转小程序页面方法

web-view页面内的H5页面跳转至小程序页面一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了。那么这个问题应该如何解决呢?1、在H5页面引入JSSDK首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令。H5页面引入JSSDK的代码如下所示。scriptsrc="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">/script>2、跳转至小程序页面方法wx.min

uni-app - 面包屑导航组件,支持自定义分隔符,点击可跳转对应页面(全端兼容 H5 APP 小程序,组件代码干净整洁无BUG)

前言网上的教程代码非常乱且都有BUG存在,非常难移植到自己的项目中,本文代码干净整洁注释详细。本文提供面包屑导航组件及详细使用方法,全端兼容无BUG!您只需复制粘贴,保证几分钟就能快速移植到您的项目中,如下图所示,您需要组织好数据,丢入该组件自动渲染完成:没有任何乱七八糟的样式,代码干净整洁注释超级详细

Taro React组件开发(2) —— RuiEditor 富文本编辑器【兼容H5和微信小程序】

1.富文本编辑器需求分析需要实现图片上传显示,上传使用Taro的chooseImage和uploadFile,完成图片的上传!!!文字的居左、居中、居右展示,使用格式化方法format!!!文字的加粗、倾斜、下划线,使用格式化方法format!!!2.富文本编辑获取提示文本placeholder;微信小程序环境使用自带Editor富文本标签;H5环境使用contentEditable,开启该元素的编辑模式;微信小程序环境需要监听onReady,渲染完成会返回一个EditorContext实例,最后对富文本中文字等操作都需要通过EditorContext实现;微信小程序环境需要监听o

uni-app + vant

uni-app+vant组件库创建uni-app打开Hbuilder创建项目Hbulder下载地址:https://www.dcloud.io/下载vant组件下载地址:https://github.com/youzan/vant-weapp创建组件存放目录,引入vant组件在与pages同级目录创建’wxcomponents‘文件夹,必须是这个名称;在’wxcomponents‘下面创建’vant-weapp‘,找到下载的vant组件,复制dist文件,拷贝到新创建的’vant-weapp‘文件夹下面;使用组件在pages.json引入组件,这里是全局引入,也可以在单个组件下引入 "glob

web-view往h5传参及传参乱码问题

一、web-view往h5传参1、微信端的操作往wxml中配置web-view并在对应js中动态设置路径的参数在需要的地方修改其路径参数2、h5端(接受上面传进来的参数)注:这里建议如果h5是vue项目的话,可以本地映射一个地址出去。在vue.config.js下配置devServer--host设置为本机ip地址,接着小程序接入该地址用以测试。 通过window.location.search边可获取传进的值 不过测试的时候只能在小程序上查看毕竟在h5端没有web-view,拿过来的参数就是?及其后面的值,接着就是对字符串的操作,截取出对应的值便完成本次的传参二、传参乱码(url传参乱码)如

WANLSHOP 直播短视频种草多用户电商系统源码自营+多商户+多终端(H5+小程序+APP)

WANLSHOP高级版 可用于自营+外包项目(多主体)、 可用于外包定制开发项目、 提供开源源码,私有化部署、一款基于FastAdmin+Uni-APP开发的多终端(H5移动端、APP、微信小程序、微信公众号)、多用户商城系统拥有多种运营模式B2B2C/B2C,内置独立商家后台、商城装修、短视频、社区种草、全终端直播、阶梯拼团,智能客服等功能,一键下载配置完整的Uni-APP客户端工程源码,前后端无加密源码,方便自行二次开发,私有化部署!多平台发布微信公众号、微信小程序、H5网页、APP一套代码,全端同步使用WANLSHOP高级版, 长期免费更新升级 可用于自营+外包项目(多主体) 可用于外包

H5视频上传与播放

背景需求场景:后台管理系统:(1)配置中支持上传视频、上传成功后封面缩略图展示,点击后自动播放视频;(2)配置中支持上传多个文件;前台系统:(1)展示视频列表并点击播放;(2)展示文件列表并点击下载;说明看需求似乎很简单,再加上本身antd-design已经封装好的Upload组件,功能强大且丰富;但是具体需求场景中还是有不少交互细节,也花了一些时间调试,为以后碰到类似场景更快速高效实现,记录和分享出来上传视频且展示缩略图上传视频处理:获取视频数据,并执行上传方法;一般二进制处理,可以支持各类文件格式,本质视频也是文件的一种格式;这一步其实很简单,参考Upload组件的相关实例即可,{cons